<template>
    <div class="more-wrapper">
        <div class="left">
            <input type="text" v-model="textRef" placeholder="请输入" class="input"/>
            <button @click="handleCopy">复制内容</button>
        </div>
        <div class="right">
            <button @click="handleShow">粘贴内容</button>
            <span>{{ showTextRef }}</span>
        </div>
        <div class="more">
            <button @click="handleCapture">剪切板</button>
            <img :src="captureImg" alt="">
        </div>
    </div>
</template>
<script setup name="more">
import { ref } from 'vue';

const textRef = ref('');
const showTextRef = ref('');
const handleCopy = () => {
    window.myApi.copy(textRef.value)
}
const handleShow = async () => {
    const showText = await window.myApi.show();
    showTextRef.value = showText || '';
}

const captureImg = ref('');
const handleCapture = async () => {
    const imgSrc = await window.myApi.capture();
    captureImg.value = imgSrc || '';
}

</script>
<style scoped>
.more-wrapper{
    width: 600px;
}    
.left,.right{
    display: flex;
    margin: 10px;
}
.input{
    border: 1px solid #333;
}
</style>